<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList" bgColor="#f8f8f8">
    <!-- <view class="box"> </view> -->
    <template #top>
      <uv-navbar placeholder title="我的订单" bgColor="#FFF" @leftClick="leftClick"></uv-navbar>
      <view class="tabs p-r-20">
        <uv-tabs :list="tabsList" :scrollable="false" :current="current" @click="getTabs" lineColor="#333"
          :activeStyle="formData.activeStyle" :inactiveStyle="formData.inactiveStyle" :itemStyle="formData.itemStyle">
        </uv-tabs>
      </view>
    </template>
    <view class="m-t-24">
      <view class="flex" v-for="(item, index) in dataList" :key="index" @click="getRoute(item)">
        <view class="contentList m-x-32 m-b-20 p-28">
          <view class="flex justify-bet aling-ali">
            <view class="font-24 text-greey">
              订单编号:{{ item.order_sn }}
            </view>
            <view class="font-26">
              <!-- {{ ['取消订单', '待支付', '待发货', '待收货', '已收货', '退款/售后', '退款通过', '退款未通过', '已评价'][item.status - 1] }} -->
              {{ item.status_text }}
            </view>
          </view>
          <view class="mallProdForm" :class="['已收货', '已取消订单', '已通过', '已完成', '已退款'].includes(item.status_text) || (!item.delivery_id && item.status == 5)
            ? 'mallProdForm2'
            : 'mallProdForm3'
            ">
            <view class="mallProd flex m-t-26 p-b-26" v-for="(item2, index2) in item.products" :key="index2">
              <view>
                <uv-image width="192rpx" height="192rpx" :src="item2.image" radius="12rpx"></uv-image>
              </view>
              <view class="flex-1 flex-col m-l-20">
                <view class="font-30 font-w-b">
                  {{ item2.product_name }}
                </view>
                <view class="flex m-t-25 flex-wrap" v-if="item2.add_type == 1">
                  <view class="content font-28 m-r-20 p-x-14 p-y-6"
                    v-for="(item3, index3) in (typeof item2.suk === 'string' ? item2.suk.split(',') : (item2.suk && item2.suk.suk ? [item2.suk.suk] : []))"
                    :key="index3">
                    {{ item3 }}
                  </view>
                </view>
                <view class="m-b-30 m-t-10 " style="gap: 20rpx" v-else>
                  <view class="font-26 font-weight-middle"> 实际周长:{{ item2.reality_size }}cm</view>
                  <view class="font-26 m-t-10 font-weight-middle"> {{ item2.suk.line.product_name }}({{
                    item2.suk.line.suk
                  }}){{ item2.total_number || '0' }}颗珠子
                    <!-- {{item2.suk.materials.map(item2 => item2.product_name + 'x'
                      +
                      item2.number).join('、')}} -->
                  </view>
                </view>
                <view class="flex m-t-28 justify-bet align-ali">
                  <view class="font-28"> x{{ item2.number }} </view>
                  <view class="font-36 font-weight-bold text-840202">
                    ￥{{ item2.total_price / 100 }}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="flex justify-jfend" v-if="item.status_text !== '已收货'">
            <view class="orderBtn" @click.stop="getRefund(item)" v-if="
              ['待发货', '待收货', '退款未通过', '已拒绝'].includes(item.status_text)
            ">
              退款/售后
            </view>
            <view class="orderBtn" @click.stop="getWithdraw(item)" v-if="['退款/售后', '申请退款'].includes(item.status_text)">
              取消申请
            </view>
            <view class="orderBtn orderBtn2" @click.stop="getConfirm(item)" v-if="['待收货'].includes(item.status_text)">
              确认收货
            </view>
            <view class="orderBtn orderBtn2" @click.stop="getReturnOfGoods(item)" v-if="
              ['退款通过'].includes(item.status_text) && !item.tracking_number && item.delivery_id
            ">
              填写退货单
            </view>
            <view class="orderBtn orderBtn2 m-t-20" @click.stop="getReturnOfGoods(item)" v-if="item.tracking_number">
              已退货
            </view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import { myOrderList, confirmOrder, withdraw } from '@/api/api';
import { ref, onMounted, reactive } from 'vue';
import { useStore } from 'vuex';
import { onReachBottom, onShow, onLoad, onReady } from '@dcloudio/uni-app';
import { os, sys } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';
const paging = ref(null);
const dataList = ref([]);
onLoad((ope) => {
  if (ope.id) {
    console.log(ope.id, 'onLoad');
    current.value = ope.id;
  }
});
const leftClick = () => {
  route({ url: '/pages/my/my', type: 'launch' })
}
const formData = reactive({
  activeStyle: {
    'font-family': 'Source Han Sans CN',
    'font-weight': '700',
    'font-size': '28rpx',
  },
  inactiveStyle: {
    'font-family': 'Source Han Sans CN',
    'font-weight': '500',
    'font-size': '28rpx',
    color: '#B5B5B5',
  },
  itemStyle: {
    height: '80rpx',
    padding: '0 0',
  },
});
const current = ref(0);
const tabsList = ref([
  {
    name: '全部',
  },
  {
    name: '待发货',
  },
  {
    name: '待收货',
  },
  {
    name: '已完成',
  },
  // {
  //   name: '退货/售后',
  // },
]);
//标签切换
const getTabs = (e) => {
  console.log(e, '----tabs切换------');
  current.value = e.index;
  paging.value.reload();
};
//退款/售后
const getRefund = (e) => {
  route(`/pagesA/pages/originality/refund`, {
    order_sn: e.order_sn,
  });
};
//点击商品详情
const getRoute = (e) => {
  console.log(e, '点击商品详情');
  if (e.status_text == '退款通过') {
    route(`/pagesA/pages/originality/refundDetails`, { orderSn: e.order_sn });
  } else {
    route(`/pagesA/pages/originality/orderDetails`, { orderSn: e.order_sn });
  }
  // route(`/pagesA/pages/originality/refundDetails`, {
  //   id: 1
  // })
};

//物流填写
const getReturnOfGoods = (e) => {
  route(`/pagesA/pages/originality/returnOfGoods`, {
    orderSn: e.order_sn,
  });
};

const queryList = (page, pagesize) => {
  myOrderList({ page, pagesize, order_status: current.value }).then((res) => {
    paging.value.complete(res.data.list);
  });
};

//取消申请
const getWithdraw = (e) => {
  console.log(e, '取消申请');
  uni.showModal({
    title: '提示',
    content: '是否取消申请',
    success: (res) => {
      if (res.confirm) {
        console.log('用户点击确定');
        withdraw({ order_sn: e.order_sn }).then((res) => {
          paging.value.reload();
        });
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    },
  });
};
//确认收货
const getConfirm = (e) => {
  console.log(e, '确认收货');
  uni.showModal({
    title: '提示',
    content: '是否确认收货',
    success: (res) => {
      if (res.confirm) {
        console.log('用户点击确定');
        confirmOrder({ order_sn: e.order_sn }).then((res) => {
          paging.value.reload();
        });
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    },
  });
};
</script>

<style lang="scss" scoped>
.box {
  min-height: 100vh;
  background: #f8f8f8;
}

.contentList {
  width: 686rpx;
  // height: 419rpx;
  background: #fff;
  border-radius: 12rpx;

  .mallProdForm {
    border-bottom: 2rpx solid #d9d9d9;

    .mallProd:nth-child(2n) {
      margin-top: 0 !important;

    }

    .mallProd:last-child {
      padding-bottom: 0 !important;
    }

    .mallProd {
      .content {
        background: #f3f3f3;
        border-radius: 12rpx;
      }
    }
  }

  .mallProdForm2 {
    border-bottom: none !important;
  }

  .mallProdForm3 {
    padding-bottom: 26rpx !important;
    margin-bottom: 22rpx !important;
  }

  .orderBtn {
    padding: 13rpx 30rpx;
    box-sizing: border-box;
    border: 2rpx solid #c6c6c6;
    color: #1e1e1e;
    font-size: 28rpx;
    margin-left: 30rpx;
    border-radius: 12rpx;
  }

  .orderBtn2 {
    color: #fff;
    background: #830102;
    border: none;
  }
}
</style>
